<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Fuse</title>
</head>
<body>
<canvas id="physicsCanvas" width="800" height="350" style="border:1px solid #000;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameter Definitions ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;

    const baseFont = 'Times New Roman';
    const varFontSize = '24px';
    const captionFontSize = '22px';
    const chineseFont = 'KaiTi, STKaiti'; // Use Kaiti font for Chinese characters

    // --- Coordinate Definitions ---
    const y_center = 120; // Vertical center of the fuse
    const r = 25;         // Radius of the fuse
    const y_top = y_center - r;
    const y_bottom = y_center + r;

    const x_O = 150;      // x-coordinate of the origin 'O'
    const length_2l = 400;// Pixel length of the fuse
    const x_2l = x_O + length_2l;

    const block_width = 100;
    const block_height = 90;
    const block_y_top = y_center - block_height / 2;

    // --- Drawing Functions ---

    // Function to draw an arrow
    function drawArrow(fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Drawing Execution ---

    ctx.beginPath();

    // 1. Draw Block A
    ctx.strokeRect(x_O - block_width, block_y_top, block_width, block_height);
    ctx.font = `italic ${varFontSize} ${baseFont}`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('A', x_O - block_width / 2, y_center);

    // 2. Draw Block B
    ctx.strokeRect(x_2l, block_y_top, block_width, block_height);
    ctx.fillText('B', x_2l + block_width / 2, y_center);

    // 3. Draw the Fuse
    ctx.moveTo(x_O, y_top);
    ctx.lineTo(x_2l, y_top);
    ctx.moveTo(x_O, y_bottom);
    ctx.lineTo(x_2l, y_bottom);
    ctx.stroke();

    // 4. Draw the Coordinate Axis
    const y_axis = 220;
    const axis_start_x = x_O - 70;
    const axis_end_x = x_2l + 70;

    ctx.beginPath();
    // Axis line with arrow
    drawArrow(axis_start_x, y_axis, axis_end_x, y_axis);
    ctx.stroke();
    // Axis labels
    ctx.fillText('x', axis_end_x + 20, y_axis);

    // Ticks on the axis
    const tick_height = 5;
    // Tick at O
    ctx.beginPath();
    ctx.moveTo(x_O, y_axis - tick_height);
    ctx.lineTo(x_O, y_axis + tick_height);
    ctx.stroke();
    ctx.fillText('O', x_O, y_axis + 20);
    // Tick at 2l
    ctx.beginPath();
    ctx.moveTo(x_2l, y_axis - tick_height);
    ctx.lineTo(x_2l, y_axis + tick_height);
    ctx.stroke();
    ctx.fillText('2l', x_2l, y_axis + 20);


    // 5. Draw Dimension '2r'
    const dim_x = x_2l + block_width + 80;
    const arrow_start_offset = 20;
    
    // Top arrow (pointing down)
    ctx.beginPath();
    drawArrow(dim_x, y_top - arrow_start_offset, dim_x, y_top);
    ctx.stroke();
    
    // Bottom arrow (pointing up)
    ctx.beginPath();
    drawArrow(dim_x, y_bottom + arrow_start_offset, dim_x, y_bottom);
    ctx.stroke();

    // Label for dimension
    ctx.textAlign = 'left';
    ctx.fillText('2r', dim_x + 10, y_center);


    // 6. Draw the Caption
    ctx.font = `${captionFontSize} ${chineseFont}`;
    ctx.textAlign = 'center';
    ctx.fillText('热图 3.26.1', (axis_start_x + axis_end_x) / 2, y_axis + 70);

</script>
</body>
</html>